<template>
  <div>
    <el-card style="min-height: 600px">
      <el-row :gutter="24" style="background-color: #fcfcfc;padding: 5px 20px">
        <el-col :span="21">
          <el-button-group>
            <el-button type="success" icon="el-icon-back" @click="goBack">返回</el-button>
          </el-button-group>
        </el-col>
        <el-col :span="3">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" @click="toLast" />
            <el-button type="primary" icon="el-icon-arrow-right" @click="toNext" />
          </el-button-group>
        </el-col>
      </el-row>
      <el-descriptions border>
        <el-descriptions-item label="方案名称" label-style="width:8%" content-style="width:20%">{{ quality.projectName }}</el-descriptions-item>
        <el-descriptions-item label="方案描述" :span="2" label-style="width:8%" content-style="width:60%">{{ quality.projectDescribe }}</el-descriptions-item>
        <el-descriptions-item label="产品编码" label-style="width:8%" content-style="width:23%">{{ quality.cinvcode }}</el-descriptions-item>
        <el-descriptions-item label="产品名称" label-style="width:8%" content-style="width:23%">{{ quality.cinvname }}</el-descriptions-item>
        <el-descriptions-item label="产品规格" label-style="width:8%" content-style="width:23%">{{ quality.cinvstd }}</el-descriptions-item>
        <el-descriptions-item label="客户名称" label-style="width:8%" content-style="width:23%">{{ quality.ccusname }}</el-descriptions-item>
        <el-descriptions-item label="部门名称" label-style="width:8%" content-style="width:23%">{{ quality.cdepname }}</el-descriptions-item>
        <el-descriptions-item label="发货单号" label-style="width:8%" content-style="width:23%">{{ quality.cdlcode }}</el-descriptions-item>
        <el-descriptions-item label="质检等级" label-style="width:8%" content-style="width:23%">{{ quality.level }}</el-descriptions-item>
        <el-descriptions-item label="质检水准" label-style="width:8%" content-style="width:23%">{{ quality.grade }}</el-descriptions-item>
        <el-descriptions-item label="抽检数量" label-style="width:8%" content-style="width:23%">{{ quality.qc }}</el-descriptions-item>
        <el-descriptions-item label="最小失败" label-style="width:8%" content-style="width:23%">{{ quality.ac }}</el-descriptions-item>
        <el-descriptions-item label="最大失败" label-style="width:8%" content-style="width:23%">{{ quality.re }}</el-descriptions-item>
        <el-descriptions-item label="创建时间" label-style="width:8%" content-style="width:23%">{{ quality.createTime }}</el-descriptions-item>
        <el-descriptions-item label="创建人" label-style="width:8%" content-style="width:23%">{{ quality.createBy }}</el-descriptions-item>
      </el-descriptions>
      <el-tabs v-model="activeName" type="card" style="margin-top: 10px;">
        <el-tab-pane label="质检内容" name="质检内容">
          <el-table
            :data="quality.entitys"
            tooltip-effect="dark"
            border
            style="width: 100%;"
          >
            <el-table-column
              type="index"
              label="项次"
              width="50"
            />
            <el-table-column
              prop="planName"
              width="150px"
              label="测试项目"
            />
            <el-table-column
              prop="quotaName"
              width="150px"
              label="测试指标"
            />
            <el-table-column
              prop="specs"
              width="150px"
              label="规格"
            />
            <el-table-column
              v-if="quality.qc>=1"
              prop="no1"
              width="120px"
              label="NO.1"
            />
            <el-table-column
              v-if="quality.qc>=2"
              prop="no2"
              width="120px"
              label="NO.2"
            />
            <el-table-column
              v-if="quality.qc>=3"
              prop="no3"
              width="120px"
              label="NO.3"
            />
            <el-table-column
              v-if="quality.qc>=4"
              prop="no4"
              width="120px"
              label="NO.4"
            />
            <el-table-column
              v-if="quality.qc>=5"
              prop="no5"
              width="120px"
              label="NO.5"
            />
            <el-table-column
              prop="judge"
              width="90px"
              label="系统"
            />
            <el-table-column
              prop="result"
              width="110px"
              label="人工"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="图片" name="图片">
          <el-card v-for="(item,index) in quality.images" :key="index" style="height: 200px;width: 200px;float: left">
            <el-image :key="item.id" :src="fileURL+item.imgUrl" :preview-src-list="[fileURL+item.imgUrl]" />
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card>
      <el-descriptions border>
        <el-descriptions-item label="总检" label-style="width:2%" content-style="width:20%">
          {{ quality.measurement }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>
<script>
import { get } from '@/api/qcstock'
import { getNext } from '@/api/qcstock'
import { getLast } from '@/api/qcstock'
export default {
  name: 'OutComeView',
  data() {
    return {
      fileURL: process.env.VUE_APP_BASE_API,
      activeName: '质检内容',
      quality: {}
    }
  },
  created() {
    this.getQuality(this.$route.query.id)
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getQuality(id) {
      get(id).then(res => {
        this.quality = res.data.data
      })
    },

    goBack() {
      this.$router.back()
    },
    toNext() {
      getNext(this.$route.query.id).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getQuality(this.$route.query.id)
        }
      })
    },
    toLast() {
      getLast(this.$route.query.id).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getQuality(this.$route.query.id)
        }
      })
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
</style>
